<template>
    <div class="dy-main BringForwardIptSure">
      <div class="dy-header">
        <x-header :right-options="{showMore: true}" :left-options="{preventGoBack: true,backText: ''}" @on-click-back="back" @on-click-more="showMenus = true">转账确认</x-header>
      </div>
      <div class="dy-body">
        <div class="dy-wapper">
          <p>{{requestData}}</p>
          <group gutter=".01rem">
          <div class="tranAmt">
            <p class="garyfot">转账金额（元）</p>
            <p class="orangefot">{{bringForwardInfo.transferMoney | filterMoney}}</p>
          </div>
          <!-- <cell title="转账账号" :value="requestData.cardNo"></cell> -->
          <div class="cardNo">
            <p class="garyfot">转账账号</p>
            <p class="num">{{bringForwardInfo.cardNo}}</p>
          </div>
          <div class="gathering-message">
            <p class="garyfot">收款信息</p>
            <div class="card">
              <div class="left">
                <p><span>收款人</span> {{bringForwardInfo.getManName}}</p>
                <p><span>收款账号</span> {{bringForwardInfo.getCardNo}}</p>
              </div>
              <div class="right">
                <img src="" alt="">
                <p class="garyfot">{{bringForwardInfo.getBank}}</p>
              </div>
            </div>
          </div>
          <!-- <cell title="收款银行" :value="requestData.bankCode"></cell>
          <cell title="收款账户" :value="requestData.payeeNo"></cell>
          <cell title="收款人" :value="requestData.payeeName"></cell> -->
          <!-- <cell title="转账金额" :value="requestData.tranAmt"></cell>
          <cell title="网点名称" :value="requestData.bankBranch" v-if="requestData.routeFlag === '3'"></cell>
          <cell title="转账方式" :value="requestData.tranMode"></cell> -->
          <toast v-model="showPositionValue" type="text" width="6rem" :time="800" is-show-mask :text="errormsg" position="middle">{{ errormsg }}</toast>
        </group>
        <group>
          <x-input title="安全验证方式" v-model="requestData.checkMethod" label-width="2.2rem" disabled><i slot="right" class="risk"></i></x-input>
          <x-input title="手机号" v-model="requestData.mobile" label-width="2.2rem" readonly></x-input>
          <zx-smscode :sendObj="smsSendObj1" @send-mobile="getSmsMobile" v-model="TestPhone.phoneCode.val" title="验证码" label-width="2.2rem" placeholder="请输入验证码"></zx-smscode>
          <!-- <x-input title="取款密码" placeholder="请输入取款密码" v-model="TestPhone.payPwd.val" placeholder-align="right" text-align="right"></x-input> -->
        </group>
        <div class="warm">
          <p>温馨提示</p>
          <p>1. 2018年5月1日起，单卡使用短信验证码日累计不超过5万元；</p>
          <p>2. 大于5万元的转账，请前往网点申领key令或办理转账。</p>
        </div>
        <div class="btn">
          <x-button type="primary" @click.native="toNext(requestData)">确定</x-button>
        </div>
        </div>
      </div>
    </div>
</template>

<script>
export default{
  data () {
    return {
      forceFlag: '0', // 确认转账标识 0--首次转账 1--强制转账
      iconType: ['', '', '', '', ''],
      errormsg: '',
      showPositionValue: false,
      requestData: {
        cardNo: '', // 转出卡号
        payeeName: '', // 收款人姓名
        payeeNo: '', // 收款人账号
        tranAmt: '', // 转账金额
        tranMode: '1', // 到账模式
        mobile: '', // todo 转出账号绑定手机号
        payPwd: '', // 取款密码
        checkMethod: '短信验证码' // 验证方式
      },
      returnData: {},
      TestPhone: {
        phoneCode: {val: '', type: [{typeName: 'minLen', typeVal: '2', msg: '验证码不能小于2'}]}
        // payPwd: {val: '', type: [{typeName: 'minLen', typeVal: '2', msg: '取款密码不能小于2'}]}
      },
      smsSendObj1: {
        'bussType': '13',
        'sendFlag': '2',
        'clientNo': this.$store.getters.getClientNo,
        'mobile': '',
        'cardNo': ''
      },
      smsMobile: '',
      clickOne: false
    }
  },
  computed: {
    bringForwardInfo () {
      return this.$store.getters.getBringForwardInfo
    }
  },
  created () {
    // this.requestData.cardNo = this.$router.query.cardNo
  },
  methods: {
    getSmsMobile (val) {
      this.smsMobile = val
    },
    back () {
      this.$publicFun.goBack(this)
    },
    testForm (module) { // 验证跳转
      if (this.clickOne) return true
      this.clickOne = true
      if (!this.checkSmscode()) return false
      for (let key in module) {
        let lObj = module[key]
        let lRes = this.$publicFun.formCheck(lObj)
        if (!lRes.isOK) {
          this.errormsg = lRes.msg
          this.showPositionValue = true
          return false
        }
      }
      this.showPayKeyboard()
    },
    toNext: function () {
      this.testForm(this.TestPhone)
    },
    sendData () {
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'commonTransferAccount', 'basic_Data': JSON.stringify({'forceFlag': this.forceFlag, 'cardNo': this.bringForwardInfo.cardNo, 'payeeName': this.bringForwardInfo.getManName, 'payeeNo': this.bringForwardInfo.getCardNo, 'tranAmt': this.bringForwardInfo.transferMoney, 'tranMode': this.bringForwardInfo.tranMode, 'mobile': this.smsMobile, 'payPwd': this.requestData.payPwd, 'bankCode': this.bringForwardInfo.getBank, 'routeFlag': this.routeFlag, 'smsFlag': this.TestPhone.phoneCode.val})}
        }),
        (response) => {
          // alert(response)
          this.requestData = response
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            this.$router.push({name: 'BringForwardIptResult'})
          } else {
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': rep.head.respMsg
            })
          }
        })
    },
    regText (msg, type, val, index) {
      // debugger
      let carD = this.iconType.slice()
      if (!this.$publicFun.strIsEmptyOrNull(val)) {
        let lStr = this.$publicFun.stringFilter(val, type)
        lStr.isOK ? carD[index] = 'success' : carD[index] = 'error'
        if (!lStr.isOK) {
          this.errormsg = msg
          this.showPositionValue = true
        }
      } else {
        carD[index] = ''
      }
      this.iconType = carD
    },
    /*
    *  调用原生键盘
    */
    showPayKeyboard () {
      let _this = this
      this.$bridge.callhandler('showPayKeyboard', null,
        function (response) {
          response = JSON.parse(response)
          _this.requestData.payPwd = response.cipher
          _this.sendData()
        })
    },
    /*
     * 验证短信验证码
     */
    checkSmscode () {
      this.$bridge.callhandler('nativeRequest',
        JSON.stringify({
          'requstSource': 'internetRequest',
          'url': 'mstep.do?act=business',
          'params': {'method_Name': 'checkCode', 'basic_Data': JSON.stringify({'bussType': '13', 'mobile': this.smsMobile, 'smsCode': this.TestPhone.phoneCode.val})}
        }),
        (response) => {
          // alert(response)
          this.clickOne = false
          let rep = JSON.parse(response).data
          if (rep.head.respCode === '000000') {
            return true
          } else {
            this.$bridge.callhandler('showErrorHUD', {
              'type': 'toast',
              'errorMess': rep.head.respMsg
            })
            return false
          }
        })
    }
  },
  mounted: function () {
    // this.requestData.cardNo = this.$route.query.payeeNo
    // this.requestData.payeeName = this.$route.query.payeeName
    // this.requestData.payeeNo = this.$route.query.payeeNu
    // this.requestData.bankCode = this.$route.query.bankCode
    // this.requestData.tranAmt = this.$route.query.tranAmt
    // this.requestData.tranMode = this.$route.query.tranMode
  }
}
</script>

<style lang="less">
  .BringForwardIptSure{
    .risk{
      display: inline-block;
      background: url(../../../static/icon/leftArrow.svg) no-repeat center center;
      width: .24rem;
      height: .24rem;
      transform: rotate(90deg);
      &.roll{
        transform: rotate(-90deg);
        transition:all .5s;
      }
    }
    .garyfot{
      font-size: .24rem;
      line-height: .34rem;
      color: #9b9b9b;
    }
    .btn{
      padding: .64rem .3rem;
    }
    .warm{
      width: 100%;
      padding: .36rem .3rem;
      font-size: .24rem;
      color: #9b9b9b;
      &>p{
        padding-bottom: .06rem;
      }
    }
    .cardNo{
      padding:.32rem .28rem .3rem;
      overflow: hidden;
      box-shadow: 0px 0.5px 0px 0px rgba(219,219,219,1);
      border-bottom: 1px solid #eee;
      &>.num{
        float:right;
        font-size: .32rem;
        color: #9b9b9b;
      }
      &>p.garyfot{
        float: left;
      }
    }
    .tranAmt{
      width: 100%;
      height: 1.96rem;
      text-align: center;
      padding-top: .42rem;
      border-bottom: 1px solid #eee;
      box-shadow: 0px 0.5px 0px 0px rgba(219,219,219,0.5);
      .orangefot{
        padding-top: .12rem;
        line-height: .86rem;
        font-size: .72rem;
        color: #f28300;
      }
    }
    .gathering-message{
      width: 100%;
      height: 2.66rem;
      &>p{
        padding-top: .3rem;
        padding-left: .28rem;
        padding-bottom: .16rem;
      }
      .card{
        width: 6.94rem;
        height: 1.56rem;
        background:#F0E3D7;
        margin: 0 auto;
        border-radius: .16rem .16rem 0 0;
        padding: .36rem;
        overflow: hidden;
        &>.left{
          float: left;
          font-size: .28rem;
          &>p:first-child{
            padding-bottom: .28rem;
          }
        }
        &>.right{
          float: right;
        }
      }
    }
  }
</style>
